<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        ul {
            list-style: none
        }

        .box {
            width: 600px;
            margin: 100px auto;
            border: 1px solid #000;
            padding: 20px;
        }

        textarea {
            width: 450px;
            height: 160px;
            outline: none;
            resize: none;
        }

        ul {
            width: 450px;
            padding-left: 80px;
        }

        ul li {
            line-height: 25px;
            border-bottom: 1px dashed #cccccc;
            display: none;
        }

        input {
            float: right;
        }

        ul li a {
            float: right;
        }
    </style>
    <script src="jquery.min.js"></script>
    <script>
        $(function () {
            // 1.点击发布按钮， 动态创建一个小li，放入文本框的内容和删除按钮， 并且添加到ul 中:<a href="javascript:void(0)">删除</a>
            $(`.btn`).on(`click`,function () {
               if ($(`.txt`).val()===``) {
                   return
               }

                const content=$(`.txt`).val()
                const newLi=$(`<li>${content}<a href="javascript:void(0)">删除</a></li>`)
                //添加到ul中
                $(`#weibo ul`).prepend(newLi)
                //下拉显示
                newLi.slideDown()
                //清空
                $(`.txt`).val(``)
            })
           

            // 2.点击的删除按钮，可以删除当前的微博留言li
            $(`#weibo ul`).on(`click`, `a`, function () {

                //$(this)指代的是`a`
                $(this).parent().slideUp(1000,function () {
                //$(this)指代的是`a`的parent也就是li
                    $(this).remove()
                })
            })

        })
    </script>
</head>

<body>
    <div class="box" id="weibo">
        <span>微博发布</span>
        <textarea name="" class="txt" cols="30" rows="10"></textarea>
        <button class="btn">发布</button>
        <ul>
        </ul>
    </div>
</body>

</html>